<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>07.JSONP获取豆瓣图书接口数据并解析</title>
		<script src="./js/JSON.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
				list-style: none;
			}
			.clearfix:before,
			.clearfix:after {
				display: table;
				content: '';
			}
			.clearfix:after {
				clear: both;
			}
			.clearfix {
				*zoom: 1;
			}
			.fl {
				float: left;
			}
			.fr {
				float: right;
			}
			.wrap,
			#list {
				width: 500px;
				margin: 50px auto 0;
			}
			.wrap input {
				width: 390px;
				height: 50px;
				border: 1px solid #f90;
				font-size: 16px;
				padding: 0 0 0 10px;
				outline: none;
				border-radius: 5px;
			}
			.wrap button {
				width: auto;
				height: 50px;
				margin: 0 0 0 20px;
				cursor: pointer;
				border: 1px solid #FF9900;
				border-radius: 5px;
				font: normal 16px/50px "Microsoft YaHei";
				color: #fff;
				padding: 0 5px;
				outline: none;
				background-color: #000;
				text-align: center;
			}
			.line {
				width: 100%;
				height: 1px;
				*overflow: hidden;
				background-color: #000;
				margin: 10px 0 0 0;
			}
			#all {
				width: 500px;
				margin: 20px auto 0;
			}
		</style>
		<script>
			/**
			 * 豆瓣获取旧版图书的接口：http://api.douban.com/book/subjects?q=nodejs&alt=xd&callback=allen&start-index=(当前页 * 每页显示的条数)&max-results=20(每页显示的条数)
			 * 豆瓣获取新版图书的接口：https://api.douban.com/v2/book/search?q=nodejs&fields=id,title&callback=allen
			 */
			window.onload = function () {
				var oQ = document.getElementById("q");
				var oBtn = document.getElementsByTagName("button")[0];
				var oAll = document.getElementById("all");
				var oList = document.getElementById("list");
				
				window.allen = function (data) {
					var html = '';
					oAll.innerHTML = '查询出' + oQ.value + '图书总数为：' + data.total;
					if (data.books.length) {
						for ( var i = 0, len = data.books.length; i < len; i++ ) {
							html += '<h3>' + (i + 1) + '：' + data.books[i].title + '</h3>';	
						}
						oList.innerHTML = html;
					}
				};
				
				oBtn.addEventListener('click', function () {
					if ( oQ.value != '' ) {
						var oScript = document.createElement("script");
						oScript.src = 'https://api.douban.com/v2/book/search?q='+ oQ.value +'&fields=id,title&callback=allen';
						document.body.appendChild(oScript);
					}
				}, false);
			};
		</script>
	</head>
	<body>
		<div class="wrap clearfix">
			<input class="fl" type="text" id="q" />
			<button class="fl">搜索图书</button>
		</div>
		<div class="line"></div>
		<h2 id="all"></h2>
		<div id="list" style="margin-top: 20px;">
			<!--<h3 id="title">标题：</h3>-->
		</div>
		<!--
			JSONP：JSON With Padding
			一个域名下去请求另外一个域名下的资源或文件，就会产生跨域的问题
			原理分析如下：
			1.动态创建script的方式来加载远程资源(script标签是不涉及跨域问题的)
			2.在资源加载进来之前定义好一个函数，这个函数接收一个参数(数据),函数
			里面利用这个参数做一些事情，然后在需要的时候通过动态创建script标签来
			加载对应的远程资源，当远程的资源文件被加载进来的时候，就会去执行我们
			前面定义好的函数，并且把数据作为这个函数的参数传入进去
		-->
	</body>
</html>
